<template>
  <el-form :model="form_function_choice" label-width="80px">
    <el-form-item label="文件下载">
      <el-input v-model="file_download_link" @input="get_file_download_name" placeholder="输入下载地址">
        <template #append>
          <el-button type="success" @click="file_download">下载文件</el-button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="指定名称" v-if="file_download_link!==''">
      <el-input v-model="file_download_name" placeholder="输入文件下载后保存的名称"/>
    </el-form-item>
    <el-form-item label="解析网页" v-if="false">
      <el-input v-model="file_download_html_rpm" placeholder="输入下载地址">
        <template #append>
          <el-button type="success" @click="get_file_download_html_rpm_link">获取RPM地址</el-button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="文件上传">
      <el-upload
          style="width: 100%"
          class="upload-demo"
          :data="{'session_token': sessionToken}"
          :action="action_upload_path"
          multiple
          drag
      >
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div class="el-upload__text">
          拖动上传 或 <em>点击上传</em>
        </div>
      </el-upload>
    </el-form-item>
  </el-form>
  <el-button @click="file_data_update" style="width: 100%">刷新数据</el-button>
  <el-divider border-style="dashed" content-position="left">文件列表：</el-divider>
  <el-tree :props="props" ref="fileManageTree" :load="loadNode" lazy :expand-on-click-node="false">
    <template #default="{ node }">
        <span class="custom-tree-node">
          <span>
            <span v-if="node.isLeaf">（文件）</span>
            <span v-if="!node.isLeaf">（目录）</span>
            <span v-if="node.label==='file_download'" class="file_type_upload">（文件下载）</span>
            <span v-if="node.label==='file_upload'" class="file_type_upload">（文件上传）</span>
            <span v-if="node.label==='source_gitee'" class="file_type_src_gitee">（码云源码）</span>
            <span v-if="node.label==='source_rpm'" class="file_type_src_release">（RPM提取）</span>
            <span v-if="node.label==='log_cmd_run'" class="file_type_log_running">（任务日志）</span>
            <span v-if="node.label==='msg_obj'" class="file_type_log">（消息日志）</span>
            <span v-if="node.label==='setting_obj'" class="file_type_setting">（设置文件）</span>
            <span>{{ node.label }}</span>
          </span>
          <span>
            <el-button v-if="node.label.endsWith('.src.rpm')" @click="release_rpm_source(node.data.path)" type="success"
                       size="small" plain>提取</el-button>
            <!--<el-button v-if="node.isLeaf" type="danger" size="small" plain @click="file_remove(node)">删除</el-button>-->
          </span>
        </span>
    </template>
  </el-tree>
</template>

<script>
import getPara from "@/utils/get_para_by_url";
import axios from 'axios'
import {ElNotification} from 'element-plus'
import {UploadFilled} from '@element-plus/icons-vue'

export default {
  name: "sessionFileManage",
  props: {
    sessionToken: String
  },
  components: {
    UploadFilled
  },
  data() {
    return {
      form_function_choice: {},
      file_download_link: "",
      file_download_name: "",
      file_download_html_rpm: "",
      action_upload_path: "/upload_file_by_session_token",
      fileManageTree: {
        rootNode: null,
        rootNodeResolve: null
      },
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf',
      }
    }
  },
  methods: {
    file_download() {
      if (this.file_download_link === "") {
        ElNotification({
          title: "下载地址不能为空！",
          type: 'warning',
          duration: 1000,
        })
        return
      }
      let obj_this = this
      let data = {
        "session_token": obj_this.sessionToken,
        "session_function": "file_download",
        "download_url": obj_this.file_download_link,
        "download_name": obj_this.file_download_name
      }
      console.log(data)
      axios.post('/session_function_do', data).then(function (response) {
        ElNotification({
          title: response.data.msg_str,
          type: 'success',
          duration: 1000,
        })
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
    get_file_download_name() {
      this.file_download_name = getPara.basename(this.file_download_link)
    },
    get_file_download_html_rpm_link() {
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.fileManageTree.rootNode = node
        this.fileManageTree.rootNodeResolve = resolve
        return resolve([{name: '所有文件及目录', path: "/"}])
      }
      let obj_this = this
      let data = {"session_token": obj_this.sessionToken, "current_path": node.data.path}
      axios.post('/get_file_list_by_session_token', data).then(function (response) {
        resolve(response.data.data)
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
    file_remove(node) {
      console.log("删除文件", node.data.path)
    },
    file_data_update() {
      console.log("数据更新")
      ElNotification({
        title: "文件列表更新",
        type: 'success',
        duration: 400,
      })
      let theChildren = this.fileManageTree.rootNode.childNodes
      theChildren.splice(0, theChildren.length)
      this.loadNode(this.fileManageTree.rootNode, this.fileManageTree.rootNodeResolve)
    },
    release_rpm_source(rpm_path) {
      if (rpm_path === "") {
        return
      }
      let obj_this = this
      let data = {
        "session_token": obj_this.sessionToken,
        "session_function": "release_rpm_source",
        "rpm_file_path": rpm_path
      }
      axios.post('/session_function_do', data).then(function (response) {
        ElNotification({
          title: response.data.msg_str,
          type: 'success',
          duration: 1000,
        })
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
  },
  created() {
    this.action_upload_path = process.env.VUE_APP_API_BASE_URL + this.action_upload_path
    this.get_file_download_name()
  }
}
</script>

<style scoped>
.el-upload-dragger .el-icon--upload {
  font-size: 30px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.file_type_upload {
  color: purple;
  font-weight: bold;
}

.file_type_src_gitee {
  color: #005bf5;
  font-weight: bold;
}

.file_type_src_release {
  color: #005bf5;
  font-weight: bold;
}

.file_type_log {
  color: #ff0000;
  font-weight: bold;
}

.file_type_log_running {
  color: #ff0000;
  font-weight: bold;
}

.file_type_setting {
  color: #098c00;
  font-weight: bold;
}

</style>